<template>
	<view class="content">
		<titleBox :item="item"></titleBox>
		<view class="userInfo">
			<view class="user">
				<image :src="userInfo.imgUrl" mode="aspectFill"></image>
				<text class="title">{{userInfo.nickname}}<br/><br/>{{userInfo.sign}}</text>
				<view class="update" @click="update()">
					<uni-icons type="compose" size="15" color="#fffdff"></uni-icons>
					修改
				</view>
			</view>
		</view>
		<view class="articleInfo">
			<view>{{count.journalNumber}}篇</view>
			<view>{{count.wordCount}}字</view>
			<view @click="toPicture()">画册</view>
		</view>
		
		<view class="ucharts" v-show="isLoding">
		  <!-- 如果tab切换的父容器使用了v-show来控制显示，组件上需绑定reshow属性用于强制重新渲染图表。如组件父元素没有v-show，则不必传此参数。-->
		  <qiun-title-bar title="最近六个月日记统计"/>
		  <view class="charts-box">
		  <!-- 这里因为是页面初始化默认显示的，如果不给reshow也会显示，切换回来也不会变成白板，但切换到其他tab后，改变了窗口尺寸再切换回来后，没有reshow则不会根据改变后的窗口自动适应（除非在当前tab显示的情况下再变更窗口大小才会自适应），所以建议加上reshow属性 -->
		    <qiun-data-charts type="column" :chartData="chartsDataColumn" />
		  </view>
		  <qiun-title-bar title="心情指数"/>
		  <view class="charts-box">
		    <qiun-data-charts type="pie"  :chartData="chartsDataRing"/>
		  </view>
		</view>
		<image 
			v-show="!isLoding"
			class="lodingImg"
			src="https://mp-6f81e20c-45ed-420c-8b9c-c84e21bce18b.cdn.bspapp.com/icon/loding.gif"
			mode="aspectFit"
			>
			
		</image>
	</view>
</template>

<script>
	
	import {getViewAndWritCount,getUserInfoById,getNumberCount} from '@/api/user.js';
	import {getCountById} from '@/api/sentiment.js'
	export default {
		data() {
			return {
				id:"",
				token:"",
				item:{
					pageName:'me'
				},
				chartsDataColumn:{ 
					"categories": ["0"], 
					"series": [ 
						{ "name": "写作量", "data": [ 0] }, 
						{ "name": "阅读量", "data": [ 0] } ,
					] ,
				},
				chartsDataRing:{ 
					"series": [ 
						{ "data": [ 
							{ "name": "0", "value": 0 }
							],
						},
					] ,
				},
				isLoding:false,
				titleImg:"https://mp-6f81e20c-45ed-420c-8b9c-c84e21bce18b.cdn.bspapp.com/titleImg/user/1/title.png",
				userInfo:{
					imgUrl:"",
					nickname:"",
					sign:"",
					email:""
				},
				count:{
					journalNumber:"",
					wordCount:""
				}
			};
		},
		onLoad() {
			this.getMessage();
			this.getUserInfo()
			setTimeout(() => {
			      // 在这里执行你想要延迟执行的函数或代码
			      this.getChartsDataColumnDate() // 调用你的函数
				  this.getChartsDataRingData()
				  this.isLoding = true
			    }, 2000);
				
		},
		methods:{
			//跳转图片集
			toPicture(){
				uni.navigateTo({
					url:"/pages/me/pictureSet"
				})
			},
			getMessage(){
				this.id=uni.getStorageSync("id"),
				this.token=uni.getStorageSync("authorization")
			},
			update(){
				console.log("修改");
				uni.navigateTo({
					url:"/pages/me/updateUserInfo"
				})
			},
			getChartsDataColumnDate(){
				getViewAndWritCount({
					id:uni.getStorageSync("id"),
					token:uni.getStorageSync("authorization")
				}).then(res=>{
					if(res.data.data!=null){
						
						this.chartsDataColumn = res.data.data
					}
				})
			},
			getChartsDataRingData(){
				getCountById({
					id:this.id,
					token:this.token
				}).then(res=>{
					if(res.data.data!=null){
						this.chartsDataRing = res.data.data
					}
				})
			},
			// 获取统计的接口
			getUserInfo(){
				getUserInfoById({
					id:this.id,
					token:this.token
				}).then(res=>{
					if(res.data.data!=null){
						this.userInfo = res.data.data
					}
				});
				getNumberCount({
					id:this.id,
					token:this.token
				}).then(res=>{
					this.count = res.data.data
				})
			}
		}
	}
</script>

<style lang="scss">
page{
	background-color: $bg-gary;
}
.content{
	.userInfo{
		background-color: $font-blue;
		width: 100%;
		height: 14vh;
		.user{
			width: 100%;  
			height: 100%;  
			display: flex; // 启用flex布局  
			align-items: center; // 垂直居中  
			justify-content: center; // 水平居中  
			image{
				height: 11vh;
				width: 11vh;
				border-radius: 11vh;
				
			}
			text{
				font-size: 1.3vh;
				color: white;
			}
			.title{
				margin-left: 3vh;
			}
			.update{
				display: flex; // 添加flex布局以居中内容  
				align-items: center; // 垂直居中  
				justify-content: center; // 水平居中  
				width: 9vh;  
				height: 18%;  
				border-radius: 8rpx;  
				border:1px solid white;  
				margin-left: 9%;  
				font-size: 1.5vh;  
				color: white;  
				
				
			}
		}
	}
	.articleInfo{
		display: flex;  
		justify-content: space-between; /* 使三个view在水平方向上平均分布 */  
		align-items: space-between; /* 使三个view在垂直方向上平均分布 */ 
		background-color: #ffffff;
		height: 7vh;
		width: 100%;
		view{
			flex: 1; /* 使每个view的宽度和高度都平均分配 */  
			border: 1px solid #e8e8e8;
			text-align: center; 
			line-height: 7vh;
		}
	}
	.ucharts{
		.charts-box {
		  width: 100%;
		  height: 300px;
		}
	}
	.lodingImg{
		width: 100%;
		height: 10vh;
		margin: auto;
		margin-top: 5vh;
	}
}
</style>
